<template>
  <div class="layout-good-spec">
    <div class="operate">
      <el-button type="primary" @click="handleCreate()" size="small">添 加</el-button>
    </div>
    <el-table :data="list" v-loading="listLoading" class="product-table" size="small" max-height="292px">
      <el-table-column type="index" label="序号" width="100" :index="specIndex"></el-table-column>
      <el-table-column label="属性1" width="220">
        <template slot-scope="scope">
          <el-select v-model="scope.row.attr1" placeholder="请选择" size="small">
            <el-option v-for="item in attrList" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="属性2" width="220">
        <template slot-scope="scope">
          <el-select v-model="scope.row.attr2" placeholder="请选择" size="small">
            <el-option v-for="item in attrList" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="属性3" width="220">
        <template slot-scope="scope">
          <el-select v-model="scope.row.attr3" placeholder="请选择" size="small">
            <el-option v-for="item in attrList" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleDelete(scope.row)">删 除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "GoodSpec",
  components: {},
  data() {
    return {
      listLoading: false,
      list: [],
      attrList: []
    };
  },
  created() {
    this.list.push({
      id: 1,
      attr1: "",
      attr2: "",
      attr3: ""
    });
  },
  methods: {
    specIndex(index) {
      return `规格${index + 1}`;
    },
    handleCreate() {
      this.list.push({
        id: 1,
        attr1: "",
        attr2: "",
        attr3: ""
      });
    },
    handleDelete() {}
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.layout-good-spec {
  .operate-button {
    padding-top: 10px;
    text-align: center;
    .el-button {
      min-width: 100px;
    }
  }
}
</style>
